<template>
  <div class="subject-item">
    <span>{{ num1 }}</span>
    <span>+</span>
    <span>{{ num2 }}</span>
    <span>=</span>
    <input type="number" v-model="userAnswer" class="custom-number-input" />
    <button @click="checkAnswer">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
      userAnswer: null
    };
  },
  methods: {
    generateRandomNumbers() {
      // 生成两个1到10以内的随机数
      this.num1 = Math.floor(Math.random() * 10) + 1;
      this.num2 = Math.floor(Math.random() * 10) + 1;
    },
    checkAnswer() {
      const correctAnswer = this.num1 + this.num2;
      this.$emit('answer-submitted', {
        userAnswer: this.userAnswer,
        correctAnswer: correctAnswer
      });
      this.userAnswer = null;
      this.generateRandomNumbers();
    }
  },
  mounted() {
    this.generateRandomNumbers();
  }
};
</script>

<style scoped>
.subject-item {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject-item span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject-item input.custom-number-input {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}
.subject-item input {
  width: 50px;
  height: 20px;
}
</style>